<template>
    <div class="video">
        <ali-player-v2
                ref="VueAliplayerV2"
                class="ali-player-v2"
                :source="videoUrl"
                :options="options"
        />
        <div v-if="!videoUrl" class="noVideo">暂无视频</div>
        <img src="@/assets/images/形状 63@3x.png" title="全屏查看" @click="allScreenMethod">
        <div class="videoInfo">
            <div class="up">
                <VideoItem title="飞手" :value='dataSource.username'/>
                <VideoItem title="团队" :value="dataSource.team"/>
                <VideoItem title="设备" :value="dataSource.droneName"/>
                <VideoItem title="电池电量" :value="dataSource.remainPercent"/>
            </div>
            <div class="down">
                <VideoItem title="高度" :value="dataSource.height"/>
                <VideoItem title="速度" :value="dataSource.speed"/>
                <VideoItem title="状态" :value="dataSource.state"/>
                <VideoItem title="直播信号" :value="dataSource.signalState"/>
            </div>
        </div>
    </div>
</template>

<script>
	import AliPlayerV2 from 'vue-aliplayer-v2'
	import VideoItem from "./VideoItem"

	export default {
		name: "Video",
		components: {
			AliPlayerV2,
			VideoItem
		},
		props: {
			videoUrl: {
				type: String,
				default: ''
			},
			dataSource: {
				type: Object,
				default: function () {
					return {
						username: '',// 飞手名称
						team: '',// 团队
						droneName: '',// 设备名称
						remainPercent: '',// 电池电量
						height: '',//高度
						speed: '',// 速度
						state: '',// 飞行状态
						signalState: ''// 信号状态
					}
				}
			}
		},
		data() {
			return {
				options: {
					isLive: true,
					width: '545px',
					height: '445px'
				}
			}
		},
		watch: {
			videoUrl(val) {
				console.log(111111)
				if (val.length === 0) {
					if (this.$refs.VueAliplayerV2) {
						this.$refs.VueAliplayerV2.pause()
					}
				} else {
					if (this.$refs.VueAliplayerV2) {
						this.$refs.VueAliplayerV2.play()
					}
				}
			}
		},
		methods: {
			// 全屏显示
			allScreenMethod() {
				this.$refs['VueAliplayerV2'].requestFullScreen()
			}
		}
	}
</script>

<style scoped lang="scss">
    .video {
        position: absolute;
        top: 0;
        right: 0;

        .ali-player-v2 {
            border-radius: 10px 10px 0 0;
        }

        img {
            position: absolute;
            right: 16px;
            top: 16px;
            cursor: pointer;
        }

        .noVideo {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            color: white;
        }

        .videoInfo {
            position: absolute;
            left: 0;
            bottom: 0;
            color: white;
            width: 100%;
            background: rgb(85, 87, 91);
            padding-top: 16px;
            opacity: 1;

            .up, .down {
                display: flex;
                justify-content: space-between;
                margin-bottom: 16px;
            }
        }
    }
</style>